<template>
  <el-scrollbar style="height:100%;">
    <el-row style="min-width:1280px;">
      <el-col :span="24" class="marginBottom8">
        <Portlet>
          <el-form ref="searchForm" class="el-form-col el-form-s search-form" :model="search">
            <el-row :gutter="15" style="position:relative;">

              <el-col :span="4" style="position: absolute">
                <el-form-item prop="orderNo">
                  <el-input v-model="search.orderNo" type="textarea" :rows="4" placeholder="订单号  (支持多单查询，用英文逗号分隔)"
                            clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4" :offset=4>
                <el-form-item prop="consigneeName">
                  <el-input v-model="search.consigneeName" placeholder="客户姓名"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="consigneePhone">
                  <el-input v-model="search.consigneePhone" placeholder="客户电话"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="serviceProvider">
                  <el-input v-model="search.serviceProvider" placeholder="服务方"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="serviceProviderPhone">
                  <el-input v-model="search.serviceProviderPhone" placeholder="服务方电话"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="4">
                <el-row class="search-btns" :gutter="5">
                  <el-col :span="8">
                    <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button type="primary" plain @click="isOpen = !isOpen">{{ isOpen ? '收起' : '展开' }}</el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button @click="resetFields" plain>重置</el-button>
                  </el-col>
                </el-row>
              </el-col>

              <el-col :span="4" :offset="4">
                <el-form-item prop="addressArr">
                  <CascadeAddress v-model="search.addressArr" :level="3" changeOnSelect placeholder="省市区" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="businessNo">
                  <el-select v-model="search.businessNo" filterable placeholder="业务类型">
                    <el-option v-for="item in businessArr"
                               :key="item.value"
                               :label="item.text"
                               :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="serviceNo">
                  <el-select v-model="search.serviceNo" filterable placeholder="服务类型">
                    <el-option v-for="item in serviceArr"
                               :key="item.value"
                               :label="item.text"
                               :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <!--<el-col :span="4">-->
                <!--<el-form-item prop="colorFlag">-->
                  <!--<el-select v-model="search.orderSource" filterable placeholder="订单来源">-->
                    <!--<el-option v-for="item in orderSourceArr"-->
                               <!--:key="item.value"-->
                               <!--:label="item.text"-->
                               <!--:value="item.value">-->
                    <!--</el-option>-->
                  <!--</el-select>-->
                <!--</el-form-item>-->
              <!--</el-col>-->
              <el-col :span="4">
                <el-form-item prop="startFoundDate">
                  <el-date-picker type="date"
                                  placeholder="下单开始时间"
                                  v-model="search.startFoundDate"
                                  value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="endFoundDate">
                  <el-date-picker type="date"
                                  placeholder="下单结束时间"
                                  v-model="search.endFoundDate"
                                  value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-collapse-transition>
              <div v-show="isOpen">
                <el-row :gutter="15" style="position:relative;">

                  <el-col :span="4">
                    <el-form-item prop="colorFlag">
                      <el-select v-model="search.colorFlag" filterable placeholder="订单标记">
                        <el-option v-for="item in colorArr"
                                   :key="item.value"
                                   :label="item.text"
                                   :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <!--<el-col :span="4">-->
                    <!--<el-form-item prop="appointStart">-->
                      <!--<el-date-picker type="date"-->
                                      <!--placeholder="预约开始时间"-->
                                      <!--v-model="search.appointStart"-->
                                      <!--value-format="yyyy-MM-dd"-->
                      <!--&gt;</el-date-picker>-->
                    <!--</el-form-item>-->
                  <!--</el-col>-->
                  <!--<el-col :span="4">-->
                    <!--<el-form-item prop="appointEnd">-->
                      <!--<el-date-picker type="date"-->
                                      <!--placeholder="预约结束时间"-->
                                      <!--v-model="search.appointEnd"-->
                                      <!--value-format="yyyy-MM-dd"-->
                      <!--&gt;</el-date-picker>-->
                    <!--</el-form-item>-->
                  <!--</el-col>-->
                  <el-col :span="4">
                    <el-form-item prop="signStart">
                      <el-date-picker type="date"
                                      placeholder="签收开始时间"
                                      v-model="search.signStart"
                                      value-format="yyyy-MM-dd"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item prop="signEnd">
                      <el-date-picker type="date"
                                      placeholder="签收结束时间"
                                      v-model="search.signEnd"
                                      value-format="yyyy-MM-dd"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </el-collapse-transition>
          </el-form>
        </Portlet>
      </el-col>
      <el-col :span="24" class="marginBottom8">
        <el-card class="icon-allow">
          <div class="text-center div-sort" style="display: table">
            <div style="width: 100px;" class="cell-center" @click.prevent="orderBySigntime" :class="{'icon-allow-bg': isShowOrderSign}">
              签收日期
              <img class="icon-allow-img" v-if="isShowOrderSign" :src="isorderBySigntime ? '/static/images/faHuoBao/arrow-up.png': '/static/images/faHuoBao/arrow-down.png'" />
            </div>
            <div style="width: 100px;" class="cell-center" @click.prevent="orderByAppointTime" :class="{'icon-allow-bg': isShowOrderAppoint}">
              预约日期
              <img class="icon-allow-img" v-if="isShowOrderAppoint" :src="isorderByAppointmenttime ? '/static/images/faHuoBao/arrow-up.png': '/static/images/faHuoBao/arrow-down.png'" />
            </div>
            <div style="width: 100px;" class="cell-center" @click.prevent="orderByFoundtime" :class="{'icon-allow-bg': isShowOrderFound}">
              下单日期
              <img class="icon-allow-img" v-if="isShowOrderFound" :src="isOrderByFoundtime ? '/static/images/faHuoBao/arrow-up.png': '/static/images/faHuoBao/arrow-down.png'" />
            </div>
            <div class="clearfix"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="24" class="marginBottom8">
        <table class="order-table">
          <tr v-for="(item, index) in tableData" :key="index">
            <td class="order-table-td">
              <table class="order-table-td-table">
                <tr class="tr-header">
                  <td width="30%" align="left" colspan="2">
                    订单号：<a @click="show(item)" >{{item.orderNo}}</a>
                    <span style="margin-left:10px;"><mark-template :id="item.id" :resultColor="item.colorFlag ? item.colorFlag : 'gray'"  @refresh="refresh"></mark-template></span>
                  </td>
                  <td width="20%" align="left">
                    服务方：{{item.serviceProvider}} （ {{item.serviceProviderPhone}} ）
                  </td>
                  <td width="25%" align="center">
                    {{item.business}} | {{item.service}}：<span class="font-orange font-weight500">{{item.orderState | filterDataBaseDictionary}}</span>
                  </td>
                  <td width="25%" align="center">
                    下单时间：{{item.foundTime}}
                  </td>
                </tr>
                <tr class="tr-body">
                  <td>
                    <Upload-image :listItemStyle="listItemStyle" :showPictureNum="true" :readonly="true" :value="handleJsonStringArr(item.imgAddress)"></Upload-image>
                  </td>
                  <td>
                    <div>
                      <div class="marginBottom8">
                        商品名称：<truncate :value="item.goodsName" :maxLength="10"></truncate>
                      </div>
                      <div class="marginBottom8">
                        商品数量：{{item.goodsSum}}套
                      </div>
                    </div>
                    <div class="clearfix"></div>
                  </td>
                  <td>
                    <div class="marginBottom8">
                      客户姓名：{{item.consigneeName}} {{item.consigneePhone}}
                    </div>
                    <div class="marginBottom8">
                      客户地址：<truncate :value="item.consigneeProvince + item.consigneeCity + item.consigneeDistrict + item.consigneeAddress" :maxLength="24"></truncate>
                    </div>
                  </td>
                  <td align="center">
                    <div class="marginBottom8">
                      <span style="font-size: 24px; font-weight: bold;"
                            class="font-red">￥{{item.endFee | decimalNumFilter}}</span>
                    </div>
                    <div class="marginBottom8">
                      实付金额
                    </div>
                  </td>
                  <td align="center">
                    <div class="marginBottom8">
                      默认好评：{{item.autoEvaluationTime | filterDayHours}}
                    </div>
                    <div class="marginBottom8">
                      <el-button type="primary" plain style="width: 120px;" @click="show(item)">确认评价</el-button>
                    </div>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
        <el-col :span="24">
          <Pagination style="margin-top: 20px" class="pull-right" :total-item="totalItem" @pagination="pagination" @sizeChange="sizeChange" :perItem="params.pageSize"></Pagination>
        </el-col>
      </el-col>
    </el-row>
  </el-scrollbar>
</template>
<script>
import {copy, dotData, merge, handleJsonStringArr} from '@/utils'
import {filterSecond, filterDataBaseDictionary, unixTimestampFilter, decimalNumFilter} from '@/filters'
import {getFhbBsteType, getFhbServiceType, getFhbOrderSource} from '@/utils/selectOptions'
import markTemplate from '@/components/markTemplate'
import modalAdditionalFees from '@/views/fhb/myOrders/components/modal/modalAdditionalFees'
import modalRefund from '@/views/fhb/myOrders/components/modal/modalRefund'
export default {
  name: 'myOrdersConfirmingIndex',
  components: {
    markTemplate,
    modalAdditionalFees,
    modalRefund
  },
  filters: {
    filterSecond,
    filterDataBaseDictionary,
    unixTimestampFilter
  },
  data() {
    return {
      listItemStyle: {
        width: '120px',
        height: '90px'
      },
      searchLoading: false,
      params: {
        pageSize: 5,
        pageNum: 1
      },
      totalItem: 0,
      tableData: [],
      businessArr: [],
      serviceArr: [],
      orderSourceArr: [],
      colorArr: [
        {text: '红色', value: 'red'},
        {text: '橙色', value: 'orange'},
        {text: '黄色', value: 'yellow'},
        {text: '绿色', value: 'green'},
        {text: '蓝色', value: 'blue'}
      ],
      search: {
        orderState: '3',
        orderNo: '',
        consigneeName: '',
        consigneePhone: '',
        businessNo: '',
        serviceNo: '',
        isAbnormal: '',
        colorFlag: '',
        startFoundDate: '',
        endFoundDate: '',
        addressArr: [],
        biddersSumOb: '',
        foundtimeOb: '',
        orderSource: '',
        appointTimeStart: '',
        appointTimeEnd: ''
      },
      rows: [],
      isOpen: false,
      isOrderByPeopleNumber: false,
      isOrderByFoundtime: false,
      isShowOrderSign: false,
      isorderBySigntime: false,
      isShowOrderPeople: false,
      isShowOrderFound: false,
      isShowOrderServe: false,
      isShowOrderAppoint: false,
      showModalAdditionalFees: false,
      showModalRefund: false,
      orderId: '',
      item: {},
      refundIsOrNot: '' // 退款订单是否关闭
    }
  },
  computed: {
  },
  created() {
    // 发货宝业务类型
    getFhbBsteType().then(data => {
      this.businessArr = data
    })
    // 服务类型
    getFhbServiceType().then(arr => {
      this.serviceArr = arr
    })
    // 订单来源
    getFhbOrderSource().then(data => {
      this.orderSourceArr = data
    })
    // 获取data
    this.getTableData()
  },
  methods: {
    handleJsonStringArr,
    unixTimestampFilter,
    decimalNumFilter,
    getAppointTime(time) {
      return unixTimestampFilter(time, 'YYYY-MM-DD HH:mm')
    },
    handleClick() {
      this.searchFunc()
    },
    pagination(page) {
      this.params.pageNum = page
      this.searchFunc()
    },
    sizeChange(size) {
      this.params.pageSize = size
      this.searchFunc()
    },
    show(data) {
      this.$router.push({path: '/ss-fhb/myOrders/confirming/show/' + data.id})
    },
    searchFunc() {
      this.getTableData()
    },
    // 重置表单
    resetFields() {
      const searchForm = this.$refs.searchForm
      if (searchForm) {
        searchForm.resetFields()
      }
    },
    // 表格刷新
    refresh() {
      this.getTableData()
    },
    selectionChange(rows) {
      this.rows = rows
    },
    // reset 重置搜索框
    reset(searchForm) {
      this.$refs.searchForm.resetFields()
    },
    getTableData() {
      let data = copy(this.search, true)
      data = merge(data, this.params)
      // 处理地址
      data.provinceNo = dotData(data.addressArr, '[0]') || ''
      data.cityNo = dotData(data.addressArr, '[1]') || ''
      data.districtNo = dotData(data.addressArr, '[2]') || ''
      delete data.addressArr
      this.$ajax.table('/ms-fahuobao-json-view/FhbOrder/findFhbOrderAll', data).then(response => {
        this.tableData = response.data || []
        this.totalItem = response.totalItem
        this.tableData.forEach(v => {
          v.imgAddress = handleJsonStringArr(v.imgAddress)
        })
      })
    },
    // 排序
    orderBySigntime() {
      this.isShowOrderSign = true
      this.isShowOrderAppoint = false
      this.isShowOrderFound = false
      this.params.appointTimeOb = ''
      this.params.foundtimeOb = ''
      if (this.isorderBySigntime) {
        this.isorderBySigntime = false
        this.params.signTimeOb = 1
      } else {
        this.isorderBySigntime = true
        this.params.signTimeOb = 2
      }
      this.getTableData()
    },
    orderByAppointTime() {
      this.isShowOrderSign = false
      this.isShowOrderAppoint = true
      this.isShowOrderFound = false
      this.params.signTimeOb = ''
      this.params.foundtimeOb = ''
      if (this.isorderByAppointmenttime) {
        this.isorderByAppointmenttime = false
        this.params.appointTimeOb = 1
      } else {
        this.isorderByAppointmenttime = true
        this.params.appointTimeOb = 2
      }
      this.getTableData()
    },
    orderByFoundtime() {
      this.isShowOrderSign = false
      this.isShowOrderAppoint = false
      this.isShowOrderFound = true
      this.params.signTimeOb = ''
      this.params.appointTimeOb = ''
      if (this.isOrderByFoundtime) {
        this.isOrderByFoundtime = false
        this.params.foundtimeOb = 1
      } else {
        this.isOrderByFoundtime = true
        this.params.foundtimeOb = 2
      }
      this.getTableData()
    },
    // 详情 tabIndex： 1 报价详情 4 订单详情
    showOffer(data, tabIndex) {
    }
  }
}
</script>
